<template>
  <div>
    <PageWrapper contentBackground contentClass="p-4">
      <BasicForm @register="regUserId" @submit="handleQuery" />
    </PageWrapper>
    <PageWrapper contentBackground contentClass="p-4">
      <Card title="用户信息" :bordered="false">
        <BasicForm @register="regUser" ref="formElRef" @submit="handleSubmit">
          <template #submitBefore>
            <a-button key="modify" class="mr-2" @click="handleModify">修改</a-button>
          </template>
        </BasicForm>
      </Card>
    </PageWrapper>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { Card } from 'ant-design-vue';
  import { userschemas12 } from './data';
  import { getUserByIdApi, Delete, UpdateUser } from '/@/api/learningcorner/user';
  import {
    UserResultModel,
    AffectedRowsResultModel,
    UserParams,
  } from '/@/api/learningcorner/model/userModel';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import moment from 'moment';
  export default defineComponent({
    components: { BasicForm, PageWrapper, Card },
    setup() {
      const userIdSchemas12: FormSchema[] = [
        {
          field: 'id',
          component: 'Input',
          label: '身份证',
          required: true,
          colProps: {
            // offset: 2,
            span: 8,
          },
        },
      ];
      // const formModel = reactive<Recordable>({});
      const formElRef = ref();
      const { createMessage } = useMessage();
      const [regUserId] = useForm({
        schemas: userIdSchemas12,
        labelWidth: 100,
        actionColOptions: {
          span: 4,
          offset: 1,
        },
        submitButtonOptions: {
          text: '查询',
        },
      });
      const [regUser,{validate}] = useForm({
        schemas: userschemas12,
        labelWidth: 100,
        actionColOptions: {
          span: 24,
        },
        submitButtonOptions: {
          text: '删除',
        },
        showResetButton:false,
      });
      return {
        regUserId,
        regUser,
        formElRef,
        handleQuery: async (values: any) => {
          console.log(values);
          try {
            let result: UserResultModel = await getUserById(values.id);
            console.log(result);
            const formEl = formElRef.value;
            formEl.formActionType.setFieldsValue(result);
          } catch (err) {
            console.log(err);
            // createMessage.error(`未查询到${values.id}用户记录`);
          }
        },
        handleSubmit: async (values: any) => {
          console.log(values);
          try {
            const formEl = formElRef.value;
            let result: AffectedRowsResultModel = await deleteUserById(values.id);
            console.log(result);
            if (result.affectedRows == 1) {
              createMessage.success('用户已删除');
              formEl.formActionType.resetFields();
            }
          } catch (err) {
            console.log(err);
          }
        },
        handleModify: async (values: any) => {
          await validate()

          try {
            const formEl = formElRef.value;
            console.log(values);
            let result: AffectedRowsResultModel = await updateUser(formEl.getFieldsValue());
            console.log(result);
            if (result.affectedRows == 1) {
              createMessage.success('用户信息修改成功');
              formEl.formActionType.resetFields();
            }
          } catch (err) {
            console.log(err);
          }
        },
      };
    },
  });
  function getUserById(id: string) {
    return getUserByIdApi({ id });
  }
  function deleteUserById(id: string) {
    return Delete({ id });
  }
  function updateUser(params: UserParams) {
    return UpdateUser(params);
  }
</script>
